<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--多了下面两行-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <title>Document</title>
</head>
<style>
    .markline{
    margin-top:100px;
    background-color:#e09a9a;
    height:3px;
    width:100%;
}
a{
	text-decoration:none;
}

body {
	margin:0px;
	padding:0px;
}
.top{
    width:100%;
    margin-top:0px;
    padding-top:70px;
    height:603px;
}
.picture{
    float:left;
    margin-left:60px;
    height:340px;
    width:260px;
}
.picture img{
    height:340px;
    width:260px;
}
.des{
    margin-left:60px;
    float:left;
    width:603px;
    height:400px;
    border-left:3px rgba(225, 180, 231, 0.5) solid;
}
.left{
    float:left;
    margin-left:0px;
    margin-top:0px;
    width:300px;
    height:200px;
}
.info{
    list-style:none;
}
.info li{
    width:600px;
    font-size:18px;
    margin:10px;
    font-family:'楷体';
}
#name{
    width:500px;
    font-size:20px;
    margin:30px;
    text-align:center;
}
.other{
    float:left;
    margin-left:100px;
    border:3px #ce8181 solid;
    border-radius:25px;
    height:570px;
    width:410px;
}
.top1{
    margin-top:20px;
    text-align:center;
    font-size:25px;
    font-family:楷体;
}
.top2left{
    float:left;
    margin-top:30px;
    width:200px;
    height:200px;
}
.name1{
    margin-top:10px;
    margin-left:10px;
    font-size:20px;
    font-family:楷体;
}
.pic1{
    margin-left:15px;
    margin-top:8px;
    height:150px;
    width:150px;
}
.pic1 img{
    height:150px;
    width:150px;
}
.top2right{
    float:left;
    margin-top:30px;
    width:200px;
    height:200px;
}
.top3left{
    clear:both;
    float:left;
    margin-top:20px;
    height:200px;
    width:200px;
}

.top3right{
    float:left;
    margin-top:20px;
    height:200px;
    width:200px;
}
.markline2{
    clear:both;
    width:100%;
    margin-top:50px;
    height:5px;
}
.comment{
    float:right;
    padding-top:20px;
    margin-right:30px;
    width:1000px;
    height:600px;
    /* border-left:3px #999 solid; */
}
.selectcom{
    margin-left:20px;
    width:100%;
    height:30px;
    font-size:25px;
    font-family:楷体;
}
.comment1{
    float:left;
    margin-left:40px;
    margin-top:5px;
    height:40px;
    width:60px;
}
.comment12{
    width:800px;
    height:100px;
    margin-left:20px;
    margin-top:5px;
    float:left;
    font-family:楷体;
    font-size:25px;
}
.textcomment12{
    /* border-radius:10px solid #ddd; */
    border:3px solid #ddd;
    border-image: -webkit-linear-gradient(  royalblue,skyblue ) 20 20;
    border-image: -moz-linear-gradient(  royalblue,skyblue ) 20 20;
    border-image: -o-linear-gradient(  royalblue,skyblue ) 20 20;
    border-image: linear-gradient(  royalblue,skyblue ) 20 20;
    font-size:20px;
    font-family:楷体;
}
.comment2{
    float:left;
    margin-left:40px;
    margin-top:15px;
    height:40px;
    width:60px;
}
.comment2 img{
    height:40px;
    width:40px;
}
.comment22{
    width:800px;
    height:100px;
    margin-left:20px;
    margin-top:15px;
    float:left;
    font-family:楷体;
    font-size:25px;
}
.comment1 img{
    height:40px;
    width:40px;
}
.yourcomment{
    clear:both;
    margin-left:20px;
    width:100%;
    height:30px;
    font-size:25px;
    font-family:楷体;
}
.yourname{
    float:left;
    margin-left:50px;
    margin-top:6px;
    font-size:25px;
    font-family:楷体;
    height:30px;
}
.yourname2{
    float:left;
    margin-left:10px;
    margin-top:6px;
    width:400px;
    height:30px;
}
.text1{
    border-radius:5px;
    height:20px;
}
.yournum{
    float:left;
    margin-left:50px;
    margin-top:6px;
    font-size:25px;
    font-family:楷体;
}
.yournum2{
    float:left;
    margin-left:10px;
    margin-top:6px;
    width:400px;
}
.commentcon{
    clear:both;
    float:left;
    margin-left:50px;
    margin-top:10px;
    font-size:25px;
    font-family:楷体;
    height:30px;
    width:120px;

}
.commentcon2{
    float:left;
    margin:10px 0px 0px 100px;
    height:90px;
    width:800px;
}
.text2{
    margin-left:10px;
    border-radius:10px;
    overflow:auto;
    font-family:楷体;
    font-size:25px;
}
.submit{
    float:left;
    margin-left:20px;
    margin-top:10px;
    border-radius:5px;
    font-size:20px;
    font-family:楷体;
    width:100px;
}
.submit2{
    clear:both;
    float:left;
    margin-left:750px;
    margin-top:10px;
    border-radius:5px;
    font-size:20px;
    font-family:楷体;
    width:100px;
}
.submit:hover{
    background-color:rgba(255,255,255,0.5);
}
#tyb
{
    width: 30%;
    margin: 20px 20px 0px 30px;
    clear: both;
    float:right;
    /* border: black 1px solid; */
}
.round_button {
    border: 1px solid;
    display: block;
    font: bold 12px/25px Arial, sans-serif;
    text-decoration: none;
    text-align:center;
    font-size: 1em;
    /* line-height: 50px; */
    width: 100px;
    height: 30px;
    margin: 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    /* Old Firefox */
    border-radius: 15px;
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.green {
    color: #3e5706;
    background: #a5cd4e;
    /* Old browsers */
    background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5cd4e), color-stop(100%, #6b8f1a));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
    /* IE10+ */
    background: linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
    /* W3C */
}

.blue {
    color: #19667d;
    background: #70c9e3;
    /* Old browsers */
    background: -moz-linear-gradient(top, #70c9e3 0%, #39a0be 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #70c9e3), color-stop(100%, #39a0be));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #70c9e3 0%, #39a0be 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #70c9e3 0%, #39a0be 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #70c9e3 0%, #39a0be 100%);
    /* IE10+ */
    background: linear-gradient(top, #70c9e3 0%, #39a0be 100%);
    /* W3C */
}

.round_button:hover {
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .3), inset 0px 0px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .3), inset 0px 0px 2px rgba(0, 0, 0, .5);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .3), inset 0px 0px 2px rgba(0, 0, 0, .5);
}

.round_button:active {
    -webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, .7);
    -moz-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, .7);
    box-shadow: inset 0px 0px 3px rgba(0, 0, 0, .7);
}
.tyb1
{
    margin: 10px 0px 0px 0px;
    height: 150px;
    width: 100%;
    /* border: black 1px solid; */
}
#tyb2
{
    /* border: black 1px solid; */
    float: left;
    margin: 0px 0px 0px 20px;
    width: 30%;
}
.line_tyb
{
    clear: both;
    width: 100%;
    margin: 10px 0px 10px 0px;
}
.left_tyb
{
    margin: 0px 0px 0px 60px;
    float: left;
    width: 12%;
}
.middle_tyb
{
    /* border: black 1px solid; */
    float: left;
    width: 38%;
}
.right_tyb
{
    margin: 0px 0px 0px 30px;
    float: left;
    width: 10%;
}
#tyb3
{
    clear: both;
    height:660px;
    margin: 100px 0px 0px 0px;
    width: 100%;
}
#tyb4
{
    clear: both;
    height:100px;
    margin: 100px 0px 0px 0px;
    width: 100%;
}
</style>
<body>
{% include 'head.html' %}
    <div class="top">
        <div class="picture">
            <img src="{{ book_pic }}">
        </div>
        <div class="des">
            <div class="left">
                <ul class="info">
                    <li id="name"><h1>{{ book_name }}</h1></li>
                    <li><b>种类:</b>{{ book_cata }}</li>
                    <li><b>作者:</b>{{ book_au }}</li>
                    <li><b>价格:</b>{{ book_money }}</li>
                    <li><b>出版时间:</b>{{ book_time }}</li>
                    <li><b>馆内剩余数量:</b>{{ book_num }}</li>
                    <li><b>ISBN:</b>{{ book_isbn }}</li>
                    <li><b>出版社:</b>{{ book_pub }}</li>
                    <li><b>内容简介:</b>{{ book_name }}是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。它涉及程序设计语言、数据库、软件开发工具、系统平台、标准、设计模式等方面。
在现代社会中，软件应用于多个方面。典型的软件有电子邮件、嵌入式系统、人机界面、办公套件、操作系统、编译器、数据库、游戏等。同时，各个行业几乎都有计算机软件的应用，如工业、农业、银行、航空、政府部门等。这些应用促进了经济和社会的发展，也提高了工作效率和生活效率 。</li>
                </ul>
            </div>
        </div>
        <div class="other">
           <div class="top1">
               推荐图书
           </div>
           <div class="top2left">
               <div class="name1">
               </div>
               <div class="pic1">
                <img src="{{ book1 }}">
               </div>
           </div>
           <div class="top2right">
                <div class="name1">
                </div>
                <div class="pic1">
                    <img src="{{ book2 }}" >
                </div>
           </div>
           <div class="top3left">
               <div class="name1">
               </div>
               <div class="pic1">
                   <img src="{{ book3 }}">
               </div>
           </div>
           <div class="top3right">
                <div class="name1">
                </div>
                <div class="pic1">
                    <img src="{{ book4 }}">
                </div>
           </div>
        </div>
    </div>
    <div class="markline2">

    </div>
    <div id="tyb2">
    </br></br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="5">图书评分</font></br></br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="glyphicon glyphicon-star" aria-hidden="true" style="font-size:x-large"></span>
        <span class="glyphicon glyphicon-star" aria-hidden="true" style="font-size:x-large"></span>
        <span class="glyphicon glyphicon-star" aria-hidden="true" style="font-size:x-large"></span>
        <span class="glyphicon glyphicon-star" aria-hidden="true" style="font-size:x-large"></span>
        <span class="glyphicon glyphicon-star-empty" aria-hidden="true" style="font-size:x-large"></span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="5">4.0/5.0</font></br></br>
        <div class="line_tyb">
            <div class="left_tyb"><font size="4">5星：</font></div>

            <div class="middle_tyb">
        <div class="progress" >
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="90" style="width: 90%">
            <span class="sr-only">60% Complete (warning)</span>
            </div>
            </div>

        </div>
        <div class="right_tyb"><font size="4">90%</font></div>
        </div>

        <div class="line_tyb">
            <div class="left_tyb"><font size="4">4星：</font></div>

            <div class="middle_tyb">
        <div class="progress" >
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="90" style="width: 2%">
            <span class="sr-only">60% Complete (warning)</span>
            </div>
            </div>

        </div>
        <div class="right_tyb"><font size="4">2%</font></div>
        </div>

        <div class="line_tyb">
            <div class="left_tyb"><font size="4">3星：</font></div>

            <div class="middle_tyb">
        <div class="progress" >
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="90" style="width: 2%">
            <span class="sr-only">60% Complete (warning)</span>
            </div>
            </div>

        </div>
        <div class="right_tyb"><font size="4">2%</font></div>
        </div>

        <div class="line_tyb">
            <div class="left_tyb"><font size="4">2星：</font></div>

            <div class="middle_tyb">
        <div class="progress" >
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="90" style="width: 2%">
            <span class="sr-only">60% Complete (warning)</span>
            </div>
            </div>

        </div>
        <div class="right_tyb"><font size="4">2%</font></div>
        </div>

        <div class="line_tyb">
            <div class="left_tyb"><font size="4">1星：</font></div>

            <div class="middle_tyb">
        <div class="progress" >
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="90" style="width: 2%">
            <span class="sr-only">60% Complete (warning)</span>
            </div>
            </div>

        </div>
        <div class="right_tyb"><font size="4">2%</font></div>
        </div>

    </div>
    <div class="comment">
        <div class="alert alert-info" role="alert"><font size="5" face="KaiTi">精选评论</font></div>

        <div class="tyb1">
        <div class="comment1">
            <img src="../../static/portrait/1.jpg"></br>
            <b>小海豚</b>
        </div>
        <div class="comment12">
            <textarea cols="60" rows="4" class="textcomment12" readonly>读完这本书，让读者可以了解到很多完全陌生的领域。 同样让我明白一个道理，所有统一的被认为是板上钉钉的历史都不是真实的历史。 而真实的历史需要靠像作者这样的学者，放下他们的固有观念，放弃学术偏见，然后勇敢寻找我们人类文明的前世今生。</textarea>
        </div>
        </div>

        <div class="tyb1">
        <div class="comment2">
            <img src="../../static/portrait/2.jpg"></br>
            <b>小鱼鱼</b>
        </div>
        <div class="comment22">
            <textarea cols="60" rows="4" class="textcomment12" readonly>丹钦科的剧场回忆录，与各个大师的生活交织，建立新的戏剧范本，成为影响一代人的美谈。同时代北京人艺创建者之一的焦菊隐翻译，对于想从事与戏剧相关的人都需要翻翻。</textarea>
        </div>
    </div>

    <div class="tyb1">
        <div class="comment2">
            <img src="../../static/portrait/3.jpg"></br>
            <b>绿绿鸭</b>
        </div>
        <div class="comment22">
            <textarea cols="60" rows="4" class="textcomment12" readonly>让我找回了小时候看我喜爱的地摊怪奇杂志的感觉，不过这清奇的文风自是那种杂志所不能比的，从各种未解之谜和神秘预言中毕业的我，也开始把故事的真伪置于笑谈，执着于找出文本本身的趣味，涩泽算是让我得以重新审视自己童趣的引路人。</textarea>
        </div>
    </div>

    <div class="tyb1">
        <div class="comment2">
            <img src="../../static/portrait/4.jpg"></br>
            <b>无名氏</b>
        </div>
        <div class="comment22">
            <textarea cols="60" rows="4" class="textcomment12" readonly>很酷的一本小书，要是做成小开本就更对味了。小说从头至尾都没有过分暴露人物或者叙述者太多的信息或者情绪，你甚至毫不知情这个“戴着墨镜”的家伙。更酷的是文本好像通过剪辑制造出迷人的叙述间隙，就像蒙太奇手法能将两个毫不相关的镜头拼接在一起制造微妙的张力。</textarea>
        </div>
    </div>

    <div class="tyb1">
        <div class="comment2">
            <img src="../../static/portrait/5.jpg"></br>
            <b>小猫咪</b>
        </div>
        <div class="comment22">
            <textarea cols="60" rows="4" class="textcomment12" readonly>风波中认识了这本书，的确是一部充满野心的实验之作。以私人的记忆为起点，从家族史蔓延至宏大历史，其中涵盖了文学政治等多个面向的书写，引用与知识的密度极大。</textarea>
        </div>
    </div>

    <div class="tyb1">
        <div class="comment2">
            <img src="../../static/portrait/6.jpg"></br>
            <b>小可爱</b>
        </div>
        <div class="comment22">
            <textarea cols="60" rows="4" class="textcomment12" readonly>尚在黑暗间的罅缝中的人们把那些矗立于每一个房间中的纪念碑随意地编织成一团薄雾，以此作为已然投身黑暗之物的灵魂，而当那些事物的形体的投影逐渐被从黑暗中打捞拼凑的时候，这团人造的灵魂也就散了，这些明晰的投影就不会再拥有灵魂了。</textarea>
        </div>
    </div>

        <form>
        <!--
        <div class="yourcomment">
            您的评论:
        </div>
        -->

        <div class="alert alert-info" role="alert"><font size="5" face="KaiTi">留言区</font></div>

        <div class="commentcon2">
             <textarea cols="60" rows="3" placeholder="请友善评论，积极发言" class="text2"></textarea>
        </div>
        <div id="tyb">
            <button type="submit" class="round_button blue" style="float: right; margin: 10px 70px 0px 0px;">提交</button>
        </div>
        </form>
    </div>
</br></br >
<div id="tyb3">&nbsp;&nbsp;&nbsp;</div>
<div id="tyb4">
{% include 'bottom.html' %}
</div>
</body>
</html>